<template>
	<view class="contain-body">
		<view class="user">
			<image :src="newImg" mode=""></image>
			<text>{{userName}}</text>
		</view>
		<view class="contentOver">
			<view class="fiveBox">
				<view class="threeTab-item" v-for="(item,index) in functionBoxList" :key="item.title"
					@click="goToItemPage(index)">
					<image :src="item.url" mode="" class="imageTab"></image>
					<text>{{item.title}}</text>
				</view>
			</view>
			<view class="my-Services">
				<view class="myTxt">
					我的服务
				</view>
				<view class="flexRow">
					<view class="threeTab-item" v-for="(item,index) in functionBoxList2" :key="item.title"
						@click="goToItemPage(index)">
						<image :src="item.url" mode="" class="imageTab"></image>
						<text>{{item.title}}</text>
					</view>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '微信用户',
				newImg: '/static/Default.png',
				functionBoxList: [{
						url: '/static/tabIcon1.png',
						title: '全部'
					},
					{
						url: '/static/tabIcon1.png',
						title: '待付款'
					},
					{
						url: '/static/tabIcon1.png',
						title: '待发货',
					}, {
						url: '/static/tabIcon1.png',
						title: '待收货',
					}, {
						url: '/static/tabIcon1.png',
						title: '逾期',
					},
				],
				functionBoxList2: [{
					url: '/static/tabIcon1.png',
					title: '客服电话',
				}, {
					url: '/static/tabIcon1.png',
					title: '退出',
				}, ]
			};
		},
		methods: {
			goToItemPage(index) {
				uni.navigateTo({
					url: "/pages/mine/order-List/order-List"
				})
			}
		}
	}
</script>

<style lang="scss">
	.contain-body {
		background-color: #f5f5f5;
	}

	.contentOver {
		padding: 0 10px;
		box-sizing: border-box;
		width: 100%;
	}

	.myTxt {
		font-size: 15px;
		color: #333;
		font-weight: bold;
		padding: 0 0 10px 0;
		box-sizing: border-box;
		position: relative;
	}

	 

	.user {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		background-color: #FF8B07;
		padding: 15px;
		box-sizing: border-box;
		border-top: 1px solid #fff;
		color: #fff;
		font-size: 15px;
	}

	.user image {
		width: 68px;
		height: 68px;
		border-radius: 50%;
		margin-right: 20px;
	}

	.my-Services {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		 
		justify-content: flex-start;
		background-color: #fff;
		border-radius: 5px;
		box-shadow: 1px 1px 4px #e5e5e5;
		flex-direction: column;
	}

	.fiveBox {
		width: 100%;
		padding: 10px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background-color: #fff;
		border-radius: 5px;
		margin: 10px 0;
		box-shadow: 1px 1px 4px #e5e5e5;
	}

	.threeTab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #404040;
		width: 25%;
	}

	.threeTab-item .imageTab {
		width: 34px;
		height: 34px;

	}
	.flexRow{
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
</style>
